﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>生产进度看板</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <link rel="stylesheet" href="../StaticFiles/layui/admin.css" />
  <link rel="stylesheet" href="../styles/pace.css" />
  <script type="text/javascript" src="../Scripts/pace.min.js"></script>
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
      background-repeat: repeat-y;
    }

    .layui-card {
      background-color: transparent;
      border: 1px dashed #1E9FFF;
    }

    .layui-card-header {
      color: #fff;
      border: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
    }

    /*左上图片*/
    .bg-left-top {
      position: absolute;
      left: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-top.png);
    }

    /*左下图片*/
    .bg-left-bottom {
      position: absolute;
      left: -2px;
      bottom: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-bottom.png);
    }

    /*右上图片*/
    .bg-right-top {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-top.png);
    }

    /*右下图片*/
    .bg-right-bottom {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-bottom.png);
    }

    #pichanBar {
      width: 100%;
      height: 100%;
      display: table;
    }

    #xiuliBar {
      width: 100%;
      height: 100%;
      display: table;
    }

    .content {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      display: table-cell;
      vertical-align: middle;
    }

    #querySection {
      font-size: 16px;
      height: 40px;
      line-height: 30px;
      text-align: left;
      color: #fff;
    }

    #pagingInfo {
      display: inline-block;
    }

    #stepProcess {
      background-color: transparent !important;
    }

    .layui-table tr:hover,
    .layui-table[lay-even] tr:nth-child(even) {
      background-color: transparent !important;
    }

    .layui-table-cell {
      text-align: center;
    }

    #stepProcess td {
      text-align: left;
      font-weight: bold;
      color: #fff;
    }

    #stepProcess td span {
      display: inline-block;
      margin-right: 10px;
      width: 15px;
      height: 15px;
    }

    .finish {
      background: #00ff00;
    }

    .notFinish {
      background: red;
    }

    .engineno {
      color: #00bfff;
      text-decoration: underline;
      font-weight: bold;
      cursor: pointer;
    }

    .layui-table-view th {
      font-weight: bold;
      font-size: 16px;
      text-align: center;
      color: #009688;
    }

    .layui-layer-title {
      text-align: center;
      font-weight: bold;
      font-size: 18px !important;
      color: #009688 !important;
    }
  </style>
</head>

<body>
  <!--[if lt IE 9]>
        <script src="../Scripts/pollyfills/es5-shim.min.js"></script>
        <script src="../Scripts/pollyfills/es5-sham.min.js"></script>
        <script src="../Scripts/pollyfills/html5.js"></script>
        <script src="../Scripts/pollyfills/response.js"></script>
    <![endif]-->

  <div class="layui-row" style="padding: 10px 15px;">
    <div class="layui-col-md3">
      <div>
        <img src="../images/aeec_logo.png" alt="" height="60" />
      </div>
    </div>
    <div class="layui-col-md6" style="height: 60px; line-height: 60px; text-align: center;
            font-size: 40px; letter-spacing: 0.1em;color:#fff;">
      装配厂生产进度看板
    </div>
    <div class="layui-col-md3" style="height: 60px; line-height: 60px; text-align: right;
            font-size: 16px; font-weight: bold;color:#fff;" id="currentTime">
    </div>
  </div>
  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/进度.png" height="20" alt="进度" />
            年生产任务完成进度
          </div>
          <div class="layui-card-body">
            <div class="layui-row">
              <div class="layui-col-md3">
                <div class="layui-card" style="border:none;">
                  <div class="layui-card-header">
                    批产 <img src="../images/批量.png" height="26" alt="Alternate Text" />
                  </div>
                  <div class="layui-card-body">
                    <div id="pichan-pie" style="height:175px;"></div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md2">
                <div class="layui-card" style="border:none;">
                  <div class="layui-card-header">
                    备件 <img src="../images/备件.png" height="24" alt="Alternate Text" />
                  </div>
                  <div class="layui-card-body">
                    <div id="beijian-pie" style="height:180px;"></div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md2">
                <div class="layui-card" style="border:none;">
                  <div class="layui-card-header">
                    大修 <img src="../images/修理.png" height="24" alt="Alternate Text" />
                  </div>
                  <div class="layui-card-body">
                    <div id="daxiu-pie" style="height:180px;"></div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md2">
                <div class="layui-card" style="border:none;">
                  <div class="layui-card-header">
                    检修 <img src="../images/检修.png" height="24" alt="Alternate Text" />
                  </div>
                  <div class="layui-card-body">
                    <div id="jianxiu-pie" style="height:180px;"></div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md3">
                <div class="layui-card" style="border:none;">
                  <div class="layui-card-header">
                    新机 <img src="../images/new.png" height="28" alt="Alternate Text" />
                  </div>
                  <div class="layui-card-body">
                    <div id="xinji-pie" style="height:175px;"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/批量.png" height="20" alt="批量" />
            批产本月进度
          </div>
          <div class="layui-card-body">
            <div id="pichanBar" style="height: 220px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/修理.png" height="20" alt="进度" />
            修理/备件本月进度
          </div>
          <div class="layui-card-body">
            <div id="xiuliBar" style="height: 220px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/new.png" height="30" alt="批量" />
            新机各工序完成进度
          </div>
          <div class="layui-card-body">
            <div id="querySection" class="layui-btn-group">
              <button type="button" id="btnFirst" class="layui-btn layui-btn-success">
                首页
              </button>
              <button type="button" id="btnPre" class="layui-btn layui-btn-success">
                上一页
              </button>
              <button type="button" id="btnNext" class="layui-btn layui-btn-success">
                下一页
              </button>
              <button type="button" id="btnLast" class="layui-btn layui-btn-success">
                尾页
              </button>
              转到
              <input id="pageNum" type="text" style="width: 40px; height: 30px; margin: 0; line-height: 30px;
                                font-weight: bold; padding: 0;" value="" />
              页
              <button type="button" id="btnGo" class="layui-btn layui-btn-success">
                Go
              </button>
              <div id="pagingInfo">
                当前第0页，共0页，共计0条记录
              </div>
            </div>
            <table id="stepProcess" class="layui-table" lay-skin="nob">
            </table>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
  <script type="text/javascript">
    $(function () {
      $(".layui-card:last-child").css({ "marginBottom": "0px" });
      var focusProcessCurrentPage = 1;
      var focusProcessPageCount = 0;
      var pageSize = 10;   // 表格每页行数
      var interval = 10000;
      var flush = null;

      // 页面右上方时钟
      function showTime() {
        var currentTime = new Date();
        var year = currentTime.getFullYear();
        var month = currentTime.getMonth() + 1;
        var date = currentTime.getDate();
        var day = currentTime.getDay();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var time = document.getElementById("currentTime");
        if (seconds < 10) {
          seconds = "0" + seconds;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        time.innerHTML = year + "年" + month + "月" + date + "日   " + hours + " : " + minutes + " : " + seconds;
      };
      setInterval(showTime, 500);

      layui.use(['layer', 'table'], function () {
        var table = layui.table;
        var layer = layui.layer;

        //弹出层通用方法
        function openDialog(config) {
          layer.open({
            title: config.title,
            type: 1,
            content: "<table class='layui-hide' id='test'></table>",
            area: ['100%', '100%'],
            skin: 'layui-layer-rim',
            success: function (layero) {
              table.render({
                elem: '#test',
                url: config.url,
                method: config.method,
                cols: config.cols,
                where: config.QueryString,
                request: {
                  pageName: 'page', //页码的参数名称，默认：page
                  limitName: 'rows' //每页数据量的参数名，默认：limit
                },
                cellMinWidth: 80,
                page: {
                  theme: '#1E9FFF'
                },
                text: {
                  none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
              });
            }
          });
        };

        var pieOption = {
          title: {
            text: '',
            left: "50%",
            textAlign: 'center',
            x: 'center',
            y: '75%',
            textStyle: {
              fontWeight: 'bold',
              fontSize: '16',
              color: '#fff',
              textAlign: 'center'
            }
          },
          series: {
            name: '',
            type: 'pie',
            clockWise: true,
            radius: [40, 55],
            itemStyle: {
              normal: {
                shadowBlur: 0,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            center: ['50%', '40%'],
            data: [{
              value: [80],
              name: '完成',
              label: {
                normal: {
                  formatter: "{d}%",
                  position: 'center',
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize: '18',
                    fontWeight: 'bold'
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: "#009688"
                }
              }
            }, {
              value: [20],
              name: '未完成',
              itemStyle: {
                normal: {
                  color: "#FFFFFF"
                }
              }
            }]
          }
        };

        //年生产任务完成进度
        function GetYearWorkingProcessInfo() {
          $.ajax({
            type: "GET",
            url: "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetYearWorkingProcessInfo",
            dataType: "text",
            cashe: false,
            beforeSend: function () {
              echarts.dispose(document.getElementById("pichan-pie"));
              var pichanPie = echarts.init(document.getElementById('pichan-pie'));
              pichanPie.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });

              echarts.dispose(document.getElementById("xinji-pie"));
              var xinjiPie = echarts.init(document.getElementById('xinji-pie'));
              xinjiPie.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });

              echarts.dispose(document.getElementById("daxiu-pie"));
              var daxiuPie = echarts.init(document.getElementById('daxiu-pie'));
              daxiuPie.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });

              echarts.dispose(document.getElementById("jianxiu-pie"));
              var jianxiuPie = echarts.init(document.getElementById('jianxiu-pie'));
              jianxiuPie.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });

              echarts.dispose(document.getElementById("beijian-pie"));
              var beijianPie = echarts.init(document.getElementById('beijian-pie'));
              beijianPie.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });

            },
            success: function (result) {
              var data = JSON.parse(result);

              echarts.dispose(document.getElementById("pichan-pie"));
              var pichanPie = echarts.init(document.getElementById('pichan-pie'));

              echarts.dispose(document.getElementById("xinji-pie"));
              var xinjiPie = echarts.init(document.getElementById('xinji-pie'));

              echarts.dispose(document.getElementById("daxiu-pie"));
              var daxiuPie = echarts.init(document.getElementById('daxiu-pie'));

              echarts.dispose(document.getElementById("jianxiu-pie"));
              var jianxiuPie = echarts.init(document.getElementById('jianxiu-pie'));

              echarts.dispose(document.getElementById("beijian-pie"));
              var beijianPie = echarts.init(document.getElementById('beijian-pie'));

              var pichanPieOption = pieOption;
              pichanPieOption.title.text = "总数：" + data[0].planQty + "台\n完成：" + data[0].finishedQty + "台";
              pichanPieOption.series.name = "批产";
              pichanPieOption.series.data[0].value = data[0].finishedQty;
              pichanPieOption.series.data[1].value = (data[0].planQty === "0" ? 1 : data[0].notFinishedQty);
              pichanPie.setOption(pichanPieOption);

              var xinjiPieOption = pieOption;
              xinjiPieOption.title.text = "总数：" + data[1].planQty + "台\n完成：" + data[1].finishedQty + "台";
              xinjiPieOption.series.name = "新机";
              xinjiPieOption.series.data[0].value = data[1].finishedQty;
              xinjiPieOption.series.data[1].value = (data[1].planQty === "0" ? 1 : data[1].notFinishedQty);
              xinjiPie.setOption(xinjiPieOption);

              var jianxiuPieOption = pieOption;
              jianxiuPieOption.title.text = "总数：" + data[2].planQty + "台\n完成：" + data[2].finishedQty + "台";
              jianxiuPieOption.series.name = "检修";
              jianxiuPieOption.series.data[0].value = data[2].finishedQty;
              jianxiuPieOption.series.data[1].value = (data[2].planQty === "0" ? 1 : data[2].notFinishedQty);
              jianxiuPie.setOption(jianxiuPieOption);

              var beijianPieOption = pieOption;
              beijianPieOption.title.text = "总数：" + data[3].planQty + "台\n完成：" + data[3].finishedQty + "台";
              beijianPieOption.series.name = "备件";
              beijianPieOption.series.data[0].value = data[3].finishedQty;
              beijianPieOption.series.data[1].value = (data[3].planQty === "0" ? 1 : data[3].notFinishedQty);
              beijianPie.setOption(beijianPieOption);

              var daxiuPieOption = pieOption;
              daxiuPieOption.title.text = "总数：" + data[4].planQty + "台\n完成：" + data[4].finishedQty + "台";
              daxiuPieOption.series.name = "大修";
              daxiuPieOption.series.data[0].value = data[4].finishedQty;
              daxiuPieOption.series.data[1].value = (data[4].planQty === "0" ? 1 : data[4].notFinishedQty);
              daxiuPie.setOption(daxiuPieOption);

              pichanPie.on('click', function (params) {
                if (params.name === "未完成") {
                  return;
                }
                var config = {};
                config.QueryString = {
                  queryType: params.seriesName
                };
                config.url = "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetYearFinish";
                config.title = params.seriesName + "已完成明细";
                config.method = "POST";
                config.cols = [[
                  { type: 'numbers', title: '序号', width: 80 }
                  , { field: 'MFGORDERNAME', title: '订单号' }
                  , { field: 'ATTRIBUTEVALUE', title: '发动机号' }
                  , { field: 'ORDERTYPENAME', title: '订单类型' }
                  , {
                    field: 'FINISHDATE', title: '完成时间',
                    templet: function (d) {
                      if (d.FINISHDATE === null) {
                        return "";
                      } else {
                        return d.FINISHDATE.split('T')[0];
                      }
                    }
                  }

                ]];
                openDialog(config);
              });

              xinjiPie.on('click', function (params) {
                if (params.name === "未完成") {
                  return;
                }
                var config = {};
                config.QueryString = {
                  queryType: params.seriesName
                };
                config.url = "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetYearFinish";
                config.title = params.seriesName + "已完成明细";
                config.method = "POST";
                config.cols = [[
                  { type: 'numbers', title: '序号', width: 80 }
                  , { field: 'MFGORDERNAME', title: '订单号' }
                  , { field: 'ATTRIBUTEVALUE', title: '发动机号' }
                  , { field: 'ORDERTYPENAME', title: '订单类型' }
                  , {
                    field: 'FINISHDATE', title: '完成时间',
                    templet: function (d) {
                      if (d.FINISHDATE === null) {
                        return "";
                      } else {
                        return d.FINISHDATE.split('T')[0];
                      }
                    }
                  }

                ]];
                openDialog(config);
              });

              daxiuPie.on('click', function (params) {
                if (params.name === "未完成") {
                  return;
                }
                var config = {};
                config.QueryString = {
                  queryType: params.seriesName
                };
                config.url = "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetYearFinish";
                config.title = params.seriesName + "已完成明细";
                config.method = "POST";
                config.cols = [[
                  { type: 'numbers', title: '序号', width: 80 }
                  , { field: 'MFGORDERNAME', title: '订单号' }
                  , { field: 'ATTRIBUTEVALUE', title: '发动机号' }
                  , { field: 'ORDERTYPENAME', title: '订单类型' }
                  , {
                    field: 'FINISHDATE', title: '完成时间',
                    templet: function (d) {
                      if (d.FINISHDATE === null) {
                        return "";
                      } else {
                        return d.FINISHDATE.split('T')[0];
                      }
                    }
                  }

                ]];
                openDialog(config);
              });

              jianxiuPie.on('click', function (params) {
                if (params.name === "未完成") {
                  return;
                }
                var config = {};
                config.QueryString = {
                  queryType: params.seriesName
                };
                config.url = "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetYearFinish";
                config.title = params.seriesName + "已完成明细";
                config.method = "POST";
                config.cols = [[
                  { type: 'numbers', title: '序号', width: 80 }
                  , { field: 'MFGORDERNAME', title: '订单号' }
                  , { field: 'ATTRIBUTEVALUE', title: '发动机号' }
                  , { field: 'ORDERTYPENAME', title: '订单类型' }
                  , {
                    field: 'FINISHDATE', title: '完成时间',
                    templet: function (d) {
                      if (d.FINISHDATE === null) {
                        return "";
                      } else {
                        return d.FINISHDATE.split('T')[0];
                      }
                    }
                  }

                ]];
                openDialog(config);
              });

              beijianPie.on('click', function (params) {
                if (params.name === "未完成") {
                  return;
                }
                var config = {};
                config.QueryString = {
                  queryType: params.seriesName
                };
                config.url = "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetYearFinish";
                config.title = params.seriesName + "已完成明细";
                config.method = "POST";
                config.cols = [[
                  { type: 'numbers', title: '序号', width: 80 }
                  , { field: 'MFGORDERNAME', title: '订单号' }
                  , { field: 'ATTRIBUTEVALUE', title: '发动机号' }
                  , { field: 'ORDERTYPENAME', title: '订单类型' }
                  , {
                    field: 'FINISHDATE', title: '完成时间',
                    templet: function (d) {
                      if (d.FINISHDATE === null) {
                        return "";
                      } else {
                        return d.FINISHDATE.split('T')[0];
                      }
                    }
                  }

                ]];
                openDialog(config);
              });
            }
          });
        };
        GetYearWorkingProcessInfo();

        //批产本月进度
        function GetPiChanData() {
          $.ajax({
            type: "GET",
            url: "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetPiChanData",
            dataType: "text",
            cashe: false,
            beforeSend: function () {
              echarts.dispose(document.getElementById("pichanBar"));
              var pichanBar = echarts.init(document.getElementById('pichanBar'));
              pichanBar.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });
            },
            success: function (data) {
              var obj = JSON.parse(data);

              if (obj.length < 1) {
                $("#pichanBar").empty().append("<div class='content'>批产本月进度--暂无数据</div>")
                return;
              };

              var arrProductFamily = [], arrEnginePlanQty = [], arrDelayQty = [];

              for (var i = 0; i < obj.length; i++) {
                arrProductFamily.push(obj[i]["PRODUCTFAMILYNAME"]);
                arrEnginePlanQty.push(obj[i]["planQty"]);
                arrDelayQty.push(obj[i]["delayQty"]);
              };


              echarts.dispose(document.getElementById("pichanBar"));
              var pichanBar = echarts.init(document.getElementById('pichanBar'));
              pichanBar.hideLoading();

              var pichanBarOption = {
                grid: {
                  left: '3%',
                  right: '3%',
                  bottom: '3%',
                  containLabel: true
                },
                legend: {
                  data: ['总数', '超期数'],
                  x: 'left',
                  y: '0',
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'bold',
                    color: '#fff'
                  }
                },
                color: ['#00BFFF', 'red'],
                xAxis: [{
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  },
                  data: arrProductFamily
                }],
                yAxis: [{
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontWeight: 'bold',
                      fontSize: '14'
                    }
                  },
                  splitLine: {
                    show: false
                  }
                }],
                series: [{
                  name: '总数',
                  type: 'bar',
                  barMaxWidth: 25,
                  data: arrEnginePlanQty,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '14',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }, {
                  name: '超期数',
                  type: 'bar',
                  barMaxWidth: 25,
                  data: arrDelayQty,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '14',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  },
                  markPoint: {
                    itemStyle: {
                      color: '#00CD68'
                    },
                    data: [{
                      name: '超期数',
                      value: 3
                    }]
                  }
                }]
              };

              pichanBar.on('click', function (params) {
                var config = {};
                config.QueryString = {
                  productfamilyname: params.name,
                  queryType: params.seriesName
                };
                config.url = "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetPiChanDetailsData";
                config.title = "批产本月进度--" + params.name + "--" + params.seriesName + "--明细";
                config.method = "post";
                config.cols = [[
                  { type: 'numbers', title: '序号', width: 80 },
                  { field: 'ORDERTYPENAME', title: '订单类型' },
                  { field: 'ATTRIBUTEVALUE', title: '发动机号' },
                  {
                    field: 'FACTORYSTARDATE', title: '计划开始时间',
                    templet: function (d) {
                      if (d.FACTORYSTARDATE === null) {
                        return "";
                      } else {
                        return d.FACTORYSTARDATE.split('T')[0];
                      }
                    }
                  },
                  {
                    field: 'FACTORYCOMPLETIONDATE', title: '计划完成时间', align: 'center', width: '20%',
                    templet: function (d) {
                      if (d.FACTORYCOMPLETIONDATE === null) {
                        return "";
                      } else {
                        return d.FACTORYCOMPLETIONDATE.split('T')[0];
                      }
                    }
                  },
                  {
                    field: 'DELAYDAYS', title: '超期时间', align: 'center', width: '20%',
                    templet: function (d) {
                      if (d.DELAYDAYS < 0) {
                        return "0";
                      } else {
                        return d.DELAYDAYS;
                      }
                    }
                  }
                ]];
                openDialog(config);
              });

              pichanBar.setOption(pichanBarOption);
            }
          });
        };
        GetPiChanData();

        //修理/备件
        function GetXiuliOrBeiJianData() {
          $.ajax({
            type: "GET",
            url: "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetXiuliOrBeiJianData",
            dataType: "text",
            cashe: false,
            beforeSend: function () {
              echarts.dispose(document.getElementById("xiuliBar"));
              var xiuliBar = echarts.init(document.getElementById('xiuliBar'));
              xiuliBar.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });
            },
            success: function (data) {
              var obj = JSON.parse(data);

              var arrEngineType = [];
              var arrEnginePlanQty = [], arrEngineFinishedQty = [], arrToDelayQty = [], arrDelayQty = [];

              for (var i = 0; i < obj.length; i++) {
                arrEngineType.push(obj[i]["type"]);
                arrEnginePlanQty.push(obj[i]["planQty"]);
                arrEngineFinishedQty.push(obj[i]["finishedQty"]);
                arrToDelayQty.push(obj[i]["toDelayQty"]);
                arrDelayQty.push(obj[i]["delayQty"]);
              };

              echarts.dispose(document.getElementById("xiuliBar"));
              var xiuliBar = echarts.init(document.getElementById('xiuliBar'));
              xiuliBar.hideLoading();

              var option = {
                tooltip: {
                  trigger: 'axis',
                  show: false,
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                grid: {
                  left: '3%',
                  right: '3%',
                  bottom: '3%',
                  containLabel: true
                },
                legend: {
                  data: ['总数', '超期数'],
                  x: 'right',
                  y: '0',
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'bold',
                    color: '#fff'
                  }
                },
                color: ['#00BFFF', 'red'],
                xAxis: [{
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  },
                  data: arrEngineType
                }],
                yAxis: [{
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#fff',
                      width: '2'
                    }
                  },
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#fff',
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  },
                  splitLine: {
                    show: false
                  }
                }],
                series: [{
                  name: '总数',
                  type: 'bar',
                  barMaxWidth: 25,
                  data: arrEnginePlanQty,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '14',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }, {
                  name: '超期数',
                  type: 'bar',
                  barMaxWidth: 25,
                  data: arrDelayQty,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: '14',
                        fontWeight: 'bold'
                      },
                      barBorderRadius: [5, 5, 0, 0]
                    }
                  }
                }]
              };
              xiuliBar.on('click', function (params) {
                var config = {};
                config.QueryString = {
                  ordertypename: params.name,
                  queryType: params.seriesName
                };
                config.url = "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetXiuliOrBeiJianDetailsData";
                config.title = "修理/备件本月进度--" + params.name + "--" + params.seriesName + "--明细";
                config.method = "post";
                config.cols = [[
                  { type: 'numbers', title: '序号', width: 80 },
                  { field: 'ORDERTYPENAME', title: '订单类型' },
                  { field: 'ATTRIBUTEVALUE', title: '发动机号' },
                  {
                    field: 'FACTORYSTARDATE', title: '计划开始时间',
                    templet: function (d) {
                      if (d.FACTORYSTARDATE === null) {
                        return "";
                      } else {
                        return d.FACTORYSTARDATE.split('T')[0];
                      }
                    }
                  },
                  {
                    field: 'FACTORYCOMPLETIONDATE', title: '计划完成时间',
                    templet: function (d) {
                      if (d.FACTORYCOMPLETIONDATE === null) {
                        return "";
                      } else {
                        return d.FACTORYCOMPLETIONDATE.split('T')[0];
                      }
                    }
                  },
                  {
                    field: 'TODELAYDAYS', title: '超期时间',
                    templet: function (d) {
                      if (d.TODELAYDAYS < 0) {
                        return -1 * d.TODELAYDAYS;
                      } else {
                        return d.TODELAYDAYS;
                      }
                    }
                  }
                ]];
                openDialog(config);
              });
              xiuliBar.setOption(option);
            }
          });
        };
        GetXiuliOrBeiJianData();

        //新机各工序完成进度
        function GetXinjiStepInfo() {
          $.ajax({
            type: "POST",
            url: "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetXinjiStepInfo",
            dataType: "text",
            cashe: false,
            data: {
              "currentPage": focusProcessCurrentPage,
              "pageSize": pageSize
            },
            beforeSend: function () {

            },
            success: function (result) {
              var data = JSON.parse(result);

              $("#stepProcess").empty();

              if (data["rows"].length === "0") {
                return;
              };

              $("#pagingInfo").text("当前第" + focusProcessCurrentPage + "页，共" + data["pageCount"] + "页 共计" + data["total"] + "条记录");
              var $table = $("#stepProcess");

              for (var i = 0; i < data["rows"].length / 9; i++) {
                var tr = $("<tr></tr>");
                tr.append("<td class='engineno'>" + data["rows"][i * 9]["ENGINENO"] + "</td>");
                for (var j = 0; j < 9; j++) {
                  if (data["rows"][i * 9 + j]["STATUS"] === "完成") {
                    if (data["rows"][i * 9 + j]["WORKFLOWSTEPNAME"].toString().indexOf('-') != -1) {
                      tr.append("<td><span class='finish'></span>" + data["rows"][i * 9 + j]["WORKFLOWSTEPNAME"].split('-')[1] + "</td>");
                    } else {
                      tr.append("<td><span class='finish'></span>" + data["rows"][i * 9 + j]["WORKFLOWSTEPNAME"] + "</td>");
                    }
                  } else if (data["rows"][i * 9 + j]["STATUS"] === "未完成") {
                    if (data["rows"][i * 9 + j]["WORKFLOWSTEPNAME"].toString().indexOf('-') != -1) {
                      tr.append("<td><span class='notFinish'></span>" + data["rows"][i * 9 + j]["WORKFLOWSTEPNAME"].split('-')[1] + "</td>");
                    } else {
                      tr.append("<td><span class='notFinish'></span>" + data["rows"][i * 9 + j]["WORKFLOWSTEPNAME"] + "</td>");
                    }
                  } else {
                    tr.append("<td>" + data["rows"][i * 9 + j]["WORKFLOWSTEPNAME"] + "</td>");
                  }
                }
                $table.append(tr);
              }

              $("#stepProcess tr").each(function () {
                var _this = $(this);
                var col1 = _this.find("td").eq(0);
                col1.click(function () {
                  var config = {};
                  config.QueryString = { engineno: col1.text(), type: "GetOilDetailsInfo" };
                  config.url = "../handler/board/ZSWorkingProcessInfoLookBoard.ashx?type=GetXinjiStepDetailsInfo";
                  config.title = "发动机：" + col1.text() + "--各工序完成进度明细";
                  config.method = "post";
                  config.cols = [[
                    { field: 'ENGINENO', title: '发动机号' },
                    {
                      field: 'WORKFLOWSTEPNAME', title: '工序',
                      templet: function (d) {
                        if (d.WORKFLOWSTEPNAME === null) {
                          return "";
                        } else if (d.WORKFLOWSTEPNAME.indexOf('-') != -1) {
                          return d.WORKFLOWSTEPNAME.split('-')[1];
                        } else {
                          return d.WORKFLOWSTEPNAME;
                        }
                      }
                    },
                    { field: 'STEPINFODESC', title: '工步' },
                    {
                      field: '开始时间', title: '开始时间',
                      templet: function (d) {
                        if (d.开始时间 === null) {
                          return "";
                        } else {
                          return d.开始时间.split('T')[0];
                        }
                      }
                    },
                    {
                      field: '结束时间', title: '结束时间',
                      templet: function (d) {
                        if (d.结束时间 === null) {
                          return "";
                        } else {
                          return d.结束时间.split('T')[0];
                        }
                      }
                    },
                    { field: '完成日期', title: '完成日期' },
                    { field: 'EXCEEDNOTES', title: '备注' },
                    { field: '排产周期', title: '排产周期' }
                  ]];
                  openDialog(config);
                });
              });

              focusProcessCurrentPage++;
              focusProcessPageCount = data["pageCount"];
            }
          });
        };
        GetXinjiStepInfo();

        // 定时刷新重点件号排查进度
        //flush = window.setInterval(function () {
        //    if (focusProcessCurrentPage > focusProcessPageCount) {
        //        focusProcessCurrentPage = 1;
        //    };
        //    GetXinjiStepInfo();
        //}, interval);

        // 首页
        $("#btnFirst").click(function () {
          if (focusProcessCurrentPage === 1) {
            return;
          } else {
            focusProcessCurrentPage = 1;
            GetXinjiStepInfo();
          }
        });

        // 尾页
        $("#btnLast").click(function () {
          focusProcessCurrentPage = focusProcessPageCount;
          GetXinjiStepInfo();
        });

        // 上一页
        $("#btnPre").click(function () {
          focusProcessCurrentPage -= 2;
          if (focusProcessCurrentPage < 1) {
            focusProcessCurrentPage = 2;
            return;
          } else {
            GetXinjiStepInfo();
          }

        });

        // 下一页
        $("#btnNext").click(function () {
          if (focusProcessCurrentPage > focusProcessPageCount) {
            return;
          } else {
            GetXinjiStepInfo();
          }
        });

        // 转到
        $("#btnGo").click(function () {
          var reg = /^[1-9](\d)*$/;
          var time = $("#pageNum").val();
          if (time !== "") {
            if (reg.test(time)) {
              if (time > focusProcessPageCount) {
                layer.alert('页数不能超过最大页数', { icon: 7, title: "提示" });
                $("#pageNum").val("");
                return;
              }
            } else {
              layer.alert('格式错误！！页数只能为正整数,不能包含除数字外的其他任何字符！', { icon: 7, title: "提示" });
              $("#pageNum").val("");
              return;
            }
          } else {
            layer.alert('页数不能为空', { icon: 7, title: "提示" });
            return;
          };
          focusProcessCurrentPage = time;
          GetXinjiStepInfo();
        });
      });

    });
  </script>
</body>

</html>